<template>
    <div id="teacher">
        <el-breadcrumb class="common-bread">
            <el-breadcrumb-item>教师管理</el-breadcrumb-item>
        </el-breadcrumb>

        <div class="contentBox">
            <div>
                <label class="label">学校：</label>
                <el-autocomplete v-model="schoolName" :fetch-suggestions="querySearch" placeholder="请输入使用学校"
                    @select="handleSelect" clearable></el-autocomplete>
                <label class="label">教师：</label>
                <el-input placeholder="输入教师姓名/手机号/职工号" v-model="keywords" class="keyword"></el-input>
                <el-button type="primary" @click="getList(1)">搜索</el-button>
                <el-button type="primary" @click="newTeacher()" class="fr" icon="el-icon-circle-plus-outline">添加教师
                </el-button>
                <el-button type="primary" class="fr" @click="toImportTeac()">导入教师</el-button>
            </div>
            <div class="list">
                <el-table :data="list">
                    <el-table-column type="index" label="序号">
                    </el-table-column>
                    <el-table-column prop="name" label="教师姓名">
                    </el-table-column>
                    <el-table-column prop="gender" label="性别">
                    </el-table-column>
                    <el-table-column prop="workNumber" label="教职工号">
                    </el-table-column>
                    <el-table-column prop="schoolName" label="学校">
                    </el-table-column>
                    <el-table-column prop="phone" label="手机号">
                    </el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <i class="el-icon-document blueIcon" @click="toDet(scope.row)" title="查看详情"></i>
                            <i class="el-icon-edit blueIcon" @click="newTeacher(scope.row)" title="编辑"></i>
                            <i class="el-icon-delete redIcon" @click="deleteTeacher(scope.row)" title="删除"></i>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagination">
                    <el-pagination v-show="this.totalCount > 10" layout="total,prev, pager, next, jumper"
                        :page-size="10" :current-page="currentPage" :total="totalCount"
                        @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { mapState, mapActions } from "vuex";
    export default {
        data() {
            return {
                uploadUrl: "",
                schools: [],
                schoolId: '',
                schoolName: "",
                keywords: "",
                list: [],
                totalCount: 0,
                currentPage: 1
            }
        },
        computed: mapState({ user: state => state.user }),
        mounted() {
            this.getSchool().then(schools => {
                let teacSelect = this.$util.getStore("teacSelect");
                let teacInfo = JSON.parse(this.$util.getStore("teacInfo"));

                if (teacInfo && teacSelect == 1) {
                    this.currentPage = teacInfo.pageNum * 1;
                    this.keywords = teacInfo.searchValue;
                    this.schoolId = teacInfo.schoolId;
                    this.schoolName = teacInfo.schoolName;
                }
                this.getList(this.currentPage);
                this.$util.removeStore("teacSelect");
                this.$util.removeStore("teacInfo");
            });
        },
        methods: {
            getSchool() {
                return new Promise(resolve => {
                    this.$util.getSchools().then(schools => {
                        schools.forEach(item => {
                            let name = item.name;
                            this.schools.push({
                                value: name,
                                schoolId: item.schoolId,
                                haveHigh: item.haveHigh,
                                haveMiddle: item.haveMiddle,
                                havePrimary: item.havePrimary
                            })
                        });

                        resolve(schools);
                    });
                })
            },
            createFilter(queryString) {
                return (school) => {
                    return (school.value.toLowerCase().indexOf(queryString.toLowerCase()) >= 0);
                };
            },
            querySearch(queryString, cb) {
                let schools = this.schools;
                let results = queryString ? schools.filter(this.createFilter(queryString)) : schools;
                // 调用 callback 返回建议列表的数据
                cb(results);
                results = [];
            },
            handleSelect(item) {
                this.schoolId = item.schoolId;
                // this.getSavedClassIndex();
            },
            //获取教师列表
            getList(pageNum) {
                if (pageNum != this.currentPage) this.currentPage = pageNum;

                let params = {
                    pageSize: 10,
                    pageNum: pageNum,
                    schoolName: this.schoolName
                }

                if (this.keywords) params.searchValue = this.keywords.trim();
                if (this.schoolId && this.schoolName) params.schoolId = this.schoolId;
                this.$util.setStore("teacInfo", JSON.stringify(params));
                delete params.schoolName;

                this.$axios.get("/adminapi/v1/tools/teachers/list", {
                    params: params
                }).then(response => {
                    if (response.data.error == 10000) {
                        this.list = [];
                        this.totalCount = 0;
                        if (!response.data.data) return;

                        let list = response.data.data.content;
                        this.totalCount = response.data.data.total;

                        list.forEach(item => {
                            item.gender = item.gender ? "男" : "女";
                            this.list.push(item);
                        });
                    } else {
                        this.$util.errorMsg(response.data.message);
                    }
                })
            },
            deleteTeacher(row) {
                this.$confirm(`您确定要删除教师 “${row.name}” ？`, "温馨提示", this.$util.confirmBtnText).then(() => {
                    this.$axios.post("/adminapi/v1/tools/teachers/delete?teacherId=" + row.teacherId).then(response => {
                        if (response.data.error == 10000) {
                            this.getList(this.currentPage);
                            this.$util.successMsg("删除成功");
                        } else {
                            this.$util.errorMsg(response.data.message);
                        }
                    })
                }).catch(() => { })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.getList(val);
            },
            //新增和编辑
            newTeacher(row) {
                this.saveSelectHistory();
                if (row) return this.$router.push('/newTeacher?id=' + row.teacherId);
                this.$router.push('/newTeacher');
            },
            //跳转详情
            toDet(row) {
                this.saveSelectHistory();
                this.$router.push('/teacherDet?id=' + row.teacherId);
            },
            //保存搜索条件
            saveSelectHistory() {
                let params = {
                    pageSize: 10,
                    pageNum: this.currentPage,
                    schoolName: this.schoolName
                }

                if (this.keywords) params.searchValue = this.keywords.trim();
                if (this.schoolId) params.schoolId = this.schoolId;

                this.$util.setStore("teacInfo", JSON.stringify(params));
            },
            toImportTeac() {
                this.saveSelectHistory();
                this.$router.push('/importTeac');
            }
        }
    }
</script>
<style>
    #teacher .select {
        margin: 0 32px;
        padding: 24px;
        background-color: #fff;
    }
</style>